<!DOCTYPE html>
<html>
<head>
    <title>2.1 JW Player 7 API Changes</title>
    <!-- Chang URLs to wherever Video.js files will be hosted -->
</head>
<body>


<script type="text/javascript" src="__PUBLIC__/lib/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
    var playerInstance;
    $(function () {
        playerInstance = jwplayer("container");
        playerInstance.setup({
            //################################播放列表=#############################################################
            'playlist' : [
                {
                    'file':"https://vodcdn.alicdn.com/oss/taobao-ugc/1dde6e764244406cbe5962b26eee078c/1476754829/video.mp4",
                    'image':"https://img.alicdn.com/tps/TB1fAlFNVXXXXXAaXXXXXXXXXXX-750-422.jpg",
                    'title': '阿里巴巴集团董事局主席',
                    "mediaid": "ddra573"
                },
                {

                    'file':"https://vodcdn.alicdn.com/oss/taobao-ugc/e6fb60eae8594f9e812233489bfa2732/1476578718/video.mp4",
                    'image':"https://img.alicdn.com/tps/TB19yBONVXXXXX2XVXXXXXXXXXX-270-170.jpg",
                    'title': '阿里巴巴王坚'
                },
                {
                    'file':"https://vodcdn.alicdn.com/oss/taobao-ugc/13d7583f9d584979bd5470073901f0d1/1476603609/video.mp4",
                    'image':"https://img.alicdn.com/tps/TB19yBONVXXXXX2XVXXXXXXXXXX-270-170.jpg",
                    'title': '《飞天 进化》 人类初始化'
                },
                {
                    'file':"https://vodcdn.alicdn.com/oss/taobao-ugc/f6e82d0da81c465eb1adeca185e3195d/1476847778/video.mp4",
                    'image':"https://img.alicdn.com/tps/TB1fAlFNVXXXXXAaXXXXXXXXXXX-750-422.jpg",
                    'title': '《飞天 进化》 组后的人类'
                }
            ]
        });

        //################################事件注册=#############################################################
        //onReady不应再被使用。它被替换on('ready')
        playerInstance.on('ready',function () {
            console.log('ready');
        });

        //
        playerInstance.on('play',function () {
            console.log('start play');
        });

        //自动加载
        playerInstance.on('playlist',function () {
            console.log('load playlist');
        });

        //播放下标为1的视频事件回调函数
        playerInstance.on('playlistItem',function () {
            console.log('load playlistItem 1');
        });

//        playerInstance.on('time',function () {
//            console.log('load playlistItem time 000000');
//        });
        //#######################################################################################################

        //播放 暂停
        $('.player-play').click(function () {
            console.log(playerInstance.getState());
            if(playerInstance.getState() != 'playing'){
                playerInstance.play(true);
                this.value = '暂停';
            }else if(playerInstance.getState() != 'idle'){
                playerInstance.play(false);
                this.value = '播放';
            }
        });

        //获取视频长度
        $('.player-length').click(function () {
            alert(playerInstance.getDuration());
        });

        //播放下标为1的视频
        $('.player-list-1').click(function () {
            playerInstance.playlistItem(1);
        });

        //播放上一个视频
        $('.player-list-prev').click(function () {
            playerInstance.playlistPrev();
        });

        //播放下一个视频
        $('.player-list-next').click(function () {
            playerInstance.playlistNext();
        });

    });

</script>
<div id="container"></div>
<hr/>
<input type="button" class="player-list-prev" value="播放上一个视频" /><br/>
<input type="button" class="player-list-next" value="播放下一个视频" /><br/>


<span id="info"/>
</body>
</html>
